<script>
import goodsInfo from "./goodsInfo.vue";
import order from "./order.vue";
import salesRevenue from "./salesRevenue.vue";
import salesVolume from "./salesVolume.vue";
import stockNumber from "./stockNumber.vue";
import overview from "./overview.vue";
import {request} from "../../static/core/request";
export default {
  name: "index",
  components: {goodsInfo,overview, order, salesRevenue, salesVolume, stockNumber},
  data(){
    return {
      goods: null,
    }
  },
  async onLoad(option) {
    const goodsCache = uni.getStorageSync('goods')
    // const { result } = await request({
    //   url: '/erp/goods/queryByGtinOrName',
    //   method: 'get',
    //   params: {
    //     type: 1,
    //     key: option.gtin,
    //   }
    // });
    if (goodsCache) {
      this.goods = goodsCache;
    }
  }
}
</script>

<template>
  <view class="page">
    <goods-info class="goods-info" :goods="goods"/>
    <view class="title">销售概览</view>
    <template v-if="goods.reportGoodsMonth">
      <overview v-if="goods.reportGoodsMonth" :overview="goods.reportGoodsMonth"/>
      <overview v-if="goods.reportGoodsMonthHistory" :overview="goods.reportGoodsMonthHistory" prefix="历史"/>
      <view class="chart-list">
        <view class="title">订单数</view>
        <order v-if="goods.reportGoodsMonth.orderNumberList" :chartOption="{ cur: goods.reportGoodsMonth.orderNumberList, history:  goods.reportGoodsMonthHistory.orderNumberList}"/>
        <view class="title">销售额(万)</view>
        <sales-revenue v-if="goods.reportGoodsMonth.salesRevenueList" :chartOption="{ cur: goods.reportGoodsMonth.salesRevenueList, history:  goods.reportGoodsMonthHistory.salesRevenueList}"/>
        <view class="title">月销量(万)</view>
        <sales-volume v-if="goods.reportGoodsMonth.salesVolumeList" :chartOption="{ cur: goods.reportGoodsMonth.salesVolumeList, history:  goods.reportGoodsMonthHistory.salesVolumeList}"/>
        <view class="title">当月库存数量</view>
        <stock-number v-if="goods.reportGoodsMonth.stockNumberList" :chartOption="{ cur: goods.reportGoodsMonth.stockNumberList, history:  goods.reportGoodsMonthHistory.stockNumberList}"/>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">
.page{
  background: #fff;
}
.chart-list{
  padding: 20rpx;
}
.title{
  font-size: 36rpx;
  margin: 80rpx 0 50rpx 0;
  text-align: center;
  color: #000;
  letter-spacing: 2rpx;
}
.goods-info{
  margin-bottom: 50rpx;
}
</style>
